<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG线条动画</title>
    <style>
        svg {
            /*position: absolute;*/
            /*width: 100%;*/
            /*height: 100%;*/
            position: relative;
            background-color: #fff;
        }

        .path {
            fill: none;
            stroke-width: 3px;
        }
        #path1 {
            stroke-dashoffset: 7% 7%;
            stroke-dasharray: 0 35%;
            animation: animation2 3s linear forwards;
        }
        /*#path2 {*/
            /*stroke-dashoffset: 7% 7%;*/
            /*stroke-dasharray: 0 35%;*/
            /*animation: animation2 3s linear forwards;*/
        /*}*/

        @keyframes animation2 {
            100% {
                stroke-dasharray: 7% 7%;
                stroke-dashoffset: 14%;
            }
        }

        @keyframes animation {
            100% {
                stroke-dasharray: 7% 7%;
                stroke-dashoffset: 7%;
            }
        }

    </style>
</head>
<body>
<!--http://www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animation/#prettyPhoto-->
<!--http://www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animation/-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="500">
    <symbol id="pathSymbol">
        <path class="path" stroke="#00adef" d="M281.221,261.806c0,2.756-2.166,4.922-4.922,4.922l0,0h-33.964c-11.715-24.119-31.503-59.855-47.156-68.026
  c-15.751,7.974-35.637,43.907-47.451,68.026h-33.865l0,0c-2.756,0-4.922-2.166-4.922-4.922l0,0l0,0c0-0.295,0-0.689,0.098-0.984
  c0,0,14.078-69.109,79.15-129.161c-2.953-2.56-5.907-5.119-8.959-7.58c-1.87-1.575-2.166-4.233-0.591-6.104
  c1.575-1.772,4.43-2.166,6.497-0.689c3.347,2.461,6.694,5.218,9.746,8.073c3.15-2.953,6.497-5.71,10.041-8.368
  c2.067-1.378,4.922-1.083,6.497,0.689c1.575,1.87,1.28,4.529-0.591,6.104c-3.052,2.56-6.104,5.218-9.155,7.876
  c65.27,59.953,79.446,129.161,79.446,129.161C281.221,261.117,281.221,261.412,281.221,261.806L281.221,261.806L281.221,261.806z"></path>
        <path class="path" stroke="#00adef" d="M194.589,212.583h0.984l0,0c19.886,28.451,31.503,54.145,31.503,54.145h-63.99C163.086,266.728,174.703,241.034,194.589,212.583
L194.589,212.583z"></path>
    </symbol>
    <g>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pathSymbol" id="path1"></use>
        <!--<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pathSymbol" id="path2"></use>-->
    </g>

</svg>

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path stroke-width="2px"  fill="none" stroke="#00adef" d="M194.589,212.583h0.984l0,0c19.886,28.451,31.503,54.145,31.503,54.145h-63.99C163.086,266.728,174.703,241.034,194.589,212.583
L194.589,212.583z"></path>
    <path id="path" fill="none" stroke="#000" stroke-width="2px" d="M452,293c0,0,0-61,72-44c0,0-47,117,81,57,s5-110,10-67s-51,77.979-50,33.989"/>
</svg>
<!--<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="290px" height="260px">-->
    <!--<rect width="100" height="150" style="fill: #fff; stroke: #00adef; stroke-width: 5px;opacity:0.5;"></rect>-->
    <!--<circle cx="100" cy="100" r="50" fill="#00adef"></circle>-->
    <!--<ellipse cx="200" cy="100" rx="50" ry="30" fill="#00adef"></ellipse>-->
    <!--<line x1="250" y1="250" x2="300" y2="300" style="stroke:#00adef;stroke-width:2"/>-->
    <!--<polygon points="220,100 300,210 170,250 123,234" style="fill:#fff;stroke:#00adef;stroke-width:1"/>-->
    <!--<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"-->
              <!--style="fill:white;stroke:red;stroke-width:2"/>-->
<!--</svg>-->

</body>
</html>